<template>
  <div id="treeList">
    <div class="title" :class="isShowLeft ? '' : 'hide-bor'">
      组织机构
      <span class="f-r">
        <i class="fa fa-edit" @click="toDep()"></i>
        <!--  <i :class="isShowList?'el-icon-arrow-down':'el-icon-arrow-up'" @click="isShowList=!isShowList"></i>-->
        <i class="fa fa-refresh" @click="getDataList"></i>
      </span>
    </div>
    <div v-loading="loading" class="tree-box">
      <el-tree
        ref="selectTree"
        :data="data"
        :props="defaultProps"
        :expand-on-click-node="false"
        :default-expand-all="isShowList"
        :highlight-current="true"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
import { getTree } from '@/api/system/department' // 接口
export default {
  name: 'treeList',
  msg: '组织机构',
  props: {
    isShowLeft: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShowList: true, // 是否全部展开
      loading: false,
      data: [],
      defaultProps: {
        children: 'childs',
        label: 'name'
      }
    }
  },
  watch: {
    isShowList(newVal, oldVal) {}
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    /* 获取部门信息树状结构 */
    async getDataList() {
      this.loading = true
      await getTree((response) => {
        this.data = response
        this.loading = false
      })
    },
    handleNodeClick(data) {
      this.$emit('checkTreeList', data.id, data.pid)
    },
    /* 跳转页面部门管理页面 */
    toDep() {
      this.$router.push({ name: 'department', query: { mId: 103 } })
    }
  }
}
</script>

<style lang="less">
#treeList {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #1dc8a4;
    color: #fff;
  }
  .title {
    width: 192px;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    font-size: 16px;
    color: #0d1636;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;

    &.hide-bor {
      border: none;
    }

    i {
      cursor: pointer;
      margin-right: 3px;
      color: #97a0b3;
    }
  }

  .tree-box {
    padding: 12px;
  }
}
</style>
